<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>jQuery UI 拖动（Draggable） + 排序（Sortable）</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
		<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
		<!--<link rel="stylesheet" href="jqueryui/style.css">-->
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style>
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				margin-bottom: 10px;
			}
			
			li {
				margin: 5px;
				padding: 5px;
				width: 150px;
			}
		</style>
		<script>
			
		</script>
	</head>

	<body>

		<ul>
			<!--<li id="draggable" class="ui-state-highlight">请拖拽我</li>-->
		</ul>

		<!--<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>-->
		<div class="table">
			<table>
				<tbody id="itemContainer">
					<tr style="display: table-row;"  data-sort='1' data-id='1'>
						<td>
							<p class="aa">菜单管理1</p>
						</td>
						<td>
							<p class="sortresult">1</p>
						</td>
						<td>

							<p>/qrcode/consume/list</p>
						</td>
						<td>
							<p>sys；user；</p>
						</td>
						<td>显示 </td>
						<td>
							<div>
								<div class=" inline-block editmenu hover" data-id="1"><i class="icon icon_edit"></i> <span>修改</span></div>
								<div style="margin-left:20px;" class="tabletop deletemenu hover inline-block " data-id="1"><i class="icon icon_delete"></i> <span>删除</span></div>
							</div>
						</td>
					</tr>

					<tr style="display: table-row;" data-sort='2' data-id='2'>
						<td>
							<p class="aa">菜单管理2</p>
						</td>
						<td>
							<p class="sortresult">2</p>
						</td>
						<td>
							<p>/qrcode/consume/list</p>
						</td>
						<td>
							<p>sys；user；</p>
						</td>
						<td>显示 </td>
						<td>
							<div>
								<div class=" inline-block editmenu hover" data-id="1"><i class="icon icon_edit"></i> <span>修改</span></div>
								<div style="margin-left:20px;" class="tabletop deletemenu hover inline-block " data-id="1"><i class="icon icon_delete"></i> <span>删除</span></div>
							</div>
						</td>
					</tr>

					<tr style="display: table-row;" data-sort='3' data-id='3'>
						<td>
							<p class="aa">菜单管理3</p>
						</td>
						<td>
							<p class="sortresult">3</p>
						</td>
						<td>
							<p>/qrcode/consume/list</p>
						</td>
						<td>
							<p>sys；user；</p>
						</td>
						<td>显示 </td>
						<td>
							<div>
								<div class=" inline-block editmenu hover" data-id="1"><i class="icon icon_edit"></i> <span>修改</span></div>
								<div style="margin-left:20px;" class="tabletop hover deletemenu inline-block " data-id="1"><i class="icon icon_delete"></i> <span>删除</span></div>
							</div>
						</td>
					</tr>

					<tr style="display: table-row;" data-sort='4' data-id='4'>
						<td>
							<p class="aa">菜单管理4</p>
						</td>
						<td>
							<p class="sortresult">4</p>
						</td>
						<td>
							<p>/qrcode/consume/list</p>
						</td>
						<td>
							<p>sys；user；</p>
						</td>
						<td>显示 </td>
						<td>
							<div>
								<div class=" inline-block editmenu hover" data-id="1"><i class="icon icon_edit"></i> <span>修改</span></div>
								<div style="margin-left:20px;" class="tabletop hover deletemenu inline-block " data-id="1"><i class="icon icon_delete"></i> <span>删除</span></div>
							</div>
						</td>
					</tr>
					<tr style="border:none">
						<td colspan="6"></td>
					</tr>
				</tbody>
			</table>
		</div>

	</body>

</html>